<template>
	<view class="content" :class="{'wrapper' : 1 == landscape}">
		<view id="video-container" class="video" :style="{width: videoWidth + 'px', height: videoHeight + 'px'}"></view>
		<cover-view style="position: absolute;width: 60px;text-align: center;line-height: 30px;height: 30px;top: 20px;right: 40px;background-color: #fff;border-radius: 5px;color: #000000;z-index: 9999;" @click="changeHD()">
			<text>{{hdText}}</text>
		</cover-view>
		<cover-view style="position: absolute;width: 100px;height: 200px;bottom: 20px;right: 20px;z-index: 9999;">
			<view style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 5px;overflow: hidden;background-color: #0686D8;display: flex;flex-direction: column;border-radius: 5px;align-items: center;text-align: center;">
				<view style="width: 100%;height: 50%;font-size: 30px;color: #fff;" @click="videoOper(8)">
					<text style="line-height: 100%;">+</text>
				</view>
				<view style="width: calc(100% - 10px);height: 50%;border-top: 0.5px solid #fff;font-size: 30px;color: #fff;" @click="videoOper(9)">
					<text style="line-height: 100%;">-</text>
				</view>
			</view>
			<view style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 10px;display: flex;flex-direction: column;background-color: #0686D8;border-radius: 5px;">
				<view style="width: 100%;height: 33%;display: flex;">
					<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(0)">
						<image style="width: 100%;height: 100%;" src="../static/icon_021.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view style="width: 100%;height: 34%;display: flex;">
					<view style="width: 50%;height: 100%;display: flex">
						<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(2)">
							<image style="width: 100%;height: 100%;" src="../static/icon_022.png"
								mode="aspectFit"></image>
						</view>
					</view>
					<view style="width: 50%;height: 100%;display: flex;">
						<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(3)">
							<image style="width: 100%;height: 100%;" src="../static/icon_023.png"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 34%;display: flex;">
					<view style="width: 100%;height: 100%;margin: 0 auto auto auto;" @click="videoOper(1)">
						<image style="width: 100%;height: 100%;" src="../static/icon_024.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</cover-view>
	</view>
</template>

<script>
	import EZUIKit from "ezuikit-js";
	export default {
		components: {
		},
		data() {
			return {
				hdText: "高清",
				isHD: false,
				videoWidth: 160,
				videoHeight: 90,
				player: null,
				accessToken:"",
				serialNumber: "",
				appKey: "",
				appSecret: "",
				channelNumber:"",
				landscape: 0,
			}
		},
		mounted() {
			//console.log("monuted");
		    // 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
		    let that = this;
		    uni.getSystemInfo({
		      success: function (res) {
				  if (that.landscape == 0) {
					  that.videoWidth = res.windowWidth
					  that.videoHeight = that.videoWidth*9/16;
				  }else {
					  that.videoWidth =  res.windowHeight-20;
					  that.videoHeight = that.videoWidth*9/16;
				  }
		      }
		    })
			
		},
		onLoad(e) {
			//console.log("onLoad");
			this.landscape = e.landscape;
			this.serialNumber = e.serialNumber;
			this.appKey = e.appKey;
			this.appSecret = e.appSecret;
			this.channelNumber = e.channelNumber;
			this.getToken();
		},
		onReady() {

		},
		methods: {
			changeHD() {
				if (this.isHD) {
					this.hdText = "高清";
					this.isHD = false;
				}else {
					this.hdText = "标清";
					this.isHD = true;
				}
				if (this.accessToken == "") {
					this.getToken()
				}else {
					this.playVideo()
				}
			},
			playVideo() {
				// let hd = "/1.live?wmode=opaque";
				// if (this.isHD) {
				// 	hd = "/1.hd.live?wmode=opaque";
				// }
				let hd = "/1.live";
				if (this.isHD) {
					hd = "/1.hd.live";
				}
				let serialNumber = this.serialNumber;
				if (this.player == null) {
					this.player = new EZUIKit.EZUIKitPlayer({
						autoplay: true,
						id: "video-container",
						accessToken: this.accessToken,
						url: 'ezopen://open.ys7.com/' + serialNumber + hd,
						template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
						// 视频上方头部控件
						//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
						//plugin: ['talk'],                       // 加载插件，talk-对讲
						// 视频下方底部控件
						//footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
						//audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
						// openSoundCallBack: data => console.log("开启声音回调", data),
						// closeSoundCallBack: data => console.log("关闭声音回调", data),
						// startSaveCallBack: data => console.log("开始录像回调", data),
						// stopSaveCallBack: data => console.log("录像回调", data),
						// capturePictureCallBack: data => console.log("截图成功回调", data),
						//fullScreenCallBack: data => console.log("全屏回调", data),
						// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
						// width: 100%,
						// height: 100%,
					});
				}else {
					this.player.play('ezopen://open.ys7.com/' + serialNumber + hd);
				}
			},
			getToken() {
				let that = this;
			    new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/token/get",
						data: {appKey: that.appKey, appSecret: that.appSecret},
						header: {'content-type': 'application/x-www-form-urlencoded'},
						dataType: 'json',
						success: res => {
							//console.log(res);
							if (res.statusCode == '200') {
								that.accessToken = res.data.data.accessToken;//"at.1l2c7hnwazjkp0rx7ra3b4prc7i6fq7p-8oifz13vkt-1cfuo7p-g4iptzkx3";
								that.playVideo();
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			videoOper(e) { //监控操纵
			    let that = this;
			    new Promise((resolve, reject) => {
			    	uni.request({
			    		method: "POST",
			    		url: "https://open.ys7.com/api/lapp/device/ptz/start",
			    		data: {
							accessToken: that.accessToken, 
							appKey: that.appKey, 
							appSecret: that.appSecret,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
							speed: 1
						},
			    		header: {'content-type': 'application/x-www-form-urlencoded'},
			    		dataType: 'json',
			    		success: res => {
							console.log(res);
			    			if (res.statusCode == '200') {
								//that.$toast.show('操作成功');
								that.endVideoOper(e);
			    			}
			    		},
			    		fail: err => {
			    			reject(err);
			    		}
			    	});
			    });
			},
			endVideoOper(e) {
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/device/ptz/stop",
						data: {
							accessToken: that.accessToken,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
						},
						header: {'content-type': 'application/x-www-form-urlencoded'},
						dataType: 'json',
						success: res => {
							if (res.statusCode == '200') {
								//that.toast.show("操作成功");
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		// font-family: 微软雅黑, MicrosoftYahei, sans-serif;
		color: #000;
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	
	.wrapper{
	    transform: rotate(90deg);
	    transform-origin:bottom left;
	    
	    position:absolute;
	    top:-100vw;
	    
	    height:100vw;
	    width:100vh;
	    
	    background-color:#000;
	    color:#fff;
	
	    overflow:auto;
	}
</style>

